﻿@page "/circle"
@attribute [TabItemOption(Text = "进度环")]

<Circle Value="@CircleValue" />
<div class="mt-3">
    <div class="btn-group">
        <button class="btn btn-primary" @onclick="e => Add(10)">
            <i class="fa fa-plus"></i>
            <span>增加 10</span>
        </button>
        <button class="btn btn-info" @onclick="e => Add(-10)">
            <i class="fa fa-minus"></i>
            <span>减少 10</span>
        </button>
    </div>
</div>
<p/><p />
<div class="mt-3">

    <Circle Width="250" Value="75" Color="Color.Success" StrokeWidth="10" ShowProgress="false">
        <div class="circle-demo">
            <h1>42,001,776</h1>
            <p>消费人群规模</p>
            <span>
                总占人数
                <i>75%</i>
            </span>
        </div>
    </Circle>
</div>

<style>

    .circle-demo {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-flow: column;
    }

        .circle-demo h1 {
            font-size: 26px;
            font-weight: 400;
        }

        .circle-demo i {
            font-style: normal;
            color: #3f414d;
        }
</style>
